<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }
        td,th{
            text-align: center;
            border: 1px solid;

        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>
</head>
<body>
<div id="div">
        <input type="text" id="name" name="name" placeholder="请输入姓名"/>
        <input type="text" id="age" name="age" placeholder="请输入年龄"/>
        <input type="text" id="gender" name="gender" placeholder="请输入性别"/>
        <input type="button" value="添加" id="add"/>
</div>

<table id="tb">
        <tr>
            <th>张三</th>
            <th>23</th>
            <th>男</th>
            <th><a href="JavaScipt:void(0);" onclick="drop(this)">删除</a></th>
        </tr>
        <tr>
            <th>李四</th>
            <th>24</th>
            <th>男</th>
            <th><a href="JavaScipt:void(0);"onclick="drop(this)">删除</a></th>
        </tr>
</table>

</body>

<script>
      document.getElementById("add").onclick=function () {
          let name = document.getElementById("name").value;
          let age = document.getElementById("age").value;
          let gender = document.getElementById("gender").value;

          document.getElementById("tb").innerHTML+="  <tr>\n" +
                "            <th>"+name+"</th>\n" +
                "            <th>"+age+"</th>\n" +
                "            <th>"+gender+"</th>\n" +
                "            <th><a href=\"JavaScipt:void(0);\"onclick=\"drop(this)\">删除</a></th>\n" +
                "        </tr>"
      }
     function drop(obj) {
          let table =  obj.parentElement.parentElement.parentElement;
          let tr =  obj.parentElement.parentElement;
          table.removeChild(tr);
      }
</script>
</html>